<template>
  <div>
    <div class="head">
      <el-input
        v-model="filterText"
        placeholder="请输入部门名称进行搜索"
        prefix-icon="el-icon-search"
      ></el-input>
    </div>
    <div class="main">
      <el-tree
        :props="props"
        :data="departments"
        default-expand-all
        :expand-on-click-node="false"
        :filter-node-method="filterNode"
        node-key="id"
        ref="tree"
      >
        <span
          class="custom-tree-node"
          slot-scope="{ node, data }"
        >
          <span>{{ node.label }}</span>
          <span>
            <el-button
              class="node-buttom"
              type="primary"
              size="mini"
              @click="showDialog(data)"
            >
              添加部门
            </el-button>
            <el-button
              class="node-buttom"
              type="danger"
              size="mini"
              @click="deleteDepartment(data)"
            >
              删除部门
            </el-button>
          </span>
        </span>
      </el-tree>
    </div>
    <div class="dialogs">
      <el-dialog
        title="添加部门"
        :visible.sync="dialogVisible"
        width="30%"
      >
        <el-form
          label-width="80px"
          class="el-form"
        >
          <el-form-item label="所属部门:">
            <span>{{parentDepartment.name}}</span>
          </el-form-item>
          <el-form-item label="部门名称:">
            <el-input
              placeholder="填写部门名称"
              v-model="department.name"
            ></el-input>
          </el-form-item>
        </el-form>
        <span
          slot="footer"
          class="dialog-footer"
        >
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button
            type="primary"
            @click="addDepartment"
          >确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>


<script>
export default {

  name: 'DepMana',

  data() {
    return {
      department: {},
      departments: [],
      parentDepartment: {},
      props: {
        label: 'name',
        children: 'children'
      },
      filterText: '',
      dialogVisible: false
    }

  },

  methods: {
    //查询所有部门及其子部门
    initDepartments() {
      this.getRequest(`system/basic/dept/`).then(resp => {
        if (resp) {
          this.departments = resp
        }
      })
    },
    //树形控件搜索过滤方法，value：搜索关键字，由watch监听的参数。data：节点数据
    filterNode(value, data) {
      if (!value) return true;
      return data.name.indexOf(value) !== -1;
    },
    //显示添加对话框
    showDialog(data) {
      this.dialogVisible = true
      this.parentDepartment = data
    },
    //添加部门
    addDepartment() {
      let param = {}
      param.name = this.department.name
      param.parentId = this.parentDepartment.id
      this.postRequest('/system/basic/dept/', param).then(resp => {
        if (resp) {
          this.initDepartments()
          this.department = {}
          this.dialogVisible = false
        }
      })
    },

    //删除部门
    deleteDepartment(data) {
      this.$confirm(`该操作将永久删除[${data.name}],是否确认？`, '提示', { type: 'warning' }).then(() => {
        this.deleteRequest(`/system/basic/dept/${data.id}`).then(resp => {
          if (resp) {
            this.initDepartments()
          }
        })
      }).catch(() => {
        this.$message.info('已取消')
      })

    },

  },
  mounted() {
    this.initDepartments()
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    }
  }
}
</script>


<style scoped>
.head {
  width: 40%;
}
.main {
  width: 40%;
}
.custom-tree-node {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
  width: 100%;
}
.node-buttom {
  font-size: 2px;
  padding: 1px 5px 1px 5px;
}
.el-form {
  width: 60%;
  margin: auto;
}
</style>